<template>
	<view class="">
		<view class="top-search-box">
			<view class="nav-search-box" @click="toSearchPage">
				<uni-icons class="nav-search-icon" type="search" size="20"></uni-icons>
				<text class="nav-search-text">搜索</text>
			</view>
		</view>
		<view class="" style="height: 90rpx;"></view>

		<view class="">
			<unicloud-db ref="udb" collection="tian-mall-products"
				field="name,goods_thumb,goods_summary,shop_id,shop_ID" :page-size="20" @load="onDataLoad" :model="list"
				v-slot:default="{data, pagination, loading, hasMore, error, options}">
				<uv-waterfall ref="waterfall" v-model="list" :add-time="10" :left-gap="leftGap" :right-gap="rightGap"
					:column-gap="columnGap" @changeList="changeList">
					<!-- 第一列数据 -->
					<template v-slot:list1>
						<view>
							<view v-for="(item, index) in list1" :key="item._id" class="waterfall-item"
								@click="navToDetail(item)">
								<view class="waterfall-item__image" :style="[imageStyle(item)]">
									<image :src="$thumbImg(item.goods_thumb,'260x260')"
										style="width: 300rpx;height: 300rpx;" mode="widthFix"></image>
								</view>
								<view class="waterfall-item__ft">
									<view class="waterfall-item__ft__title">
										<text class="value">{{item.name}}</text>
									</view>
									<view class="waterfall-item__ft__desc uv-line-2">
										<text class="value">{{item.goods_summary}}</text>
									</view>
									<view class="waterfall-item__ft__desc uv-line-2">
										<text class="value">商户门牌号：</text>
										<text class="value">{{item.shop_ID}}</text>
									</view>
								</view>
							</view>
						</view>
					</template>
					<!-- 第二列数据 -->
					<template v-slot:list2>
						<view>
							<view v-for="(item, index) in list2" :key="item._id" class="waterfall-item"
								@click="navToDetail(item)">
								<view class="waterfall-item__image" :style="[imageStyle(item)]">
									<image :src="$thumbImg(item.goods_thumb,'260x260')"
										style="width: 300rpx;height: 300rpx;" mode="widthFix"></image>
								</view>
								<view class="waterfall-item__ft">
									<view class="waterfall-item__ft__title">
										<text class="value">{{item.name}}</text>
									</view>
									<view class="waterfall-item__ft__desc uv-line-2">
										<text class="value">{{item.goods_summary}}</text>
									</view>
									<view class="waterfall-item__ft__desc uv-line-2">
										<text class="value">商户门牌号：</text>
										<text class="value">{{item.shop_ID}}</text>
									</view>
								</view>
							</view>
						</view>
					</template>
				</uv-waterfall>
				<!-- 加载更多组件 -->
				<uv-load-more :status="loadStatus">{{loading}}</uv-load-more>
			</unicloud-db>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [], // 瀑布流全部数据
				list1: [], // 瀑布流第一列数据
				list2: [], // 瀑布流第二列数据
				leftGap: 10,
				rightGap: 10,
				columnGap: 10,
				loadStatus: 'loadmore',
				page: 1, // 当前页数
				limit: 20 // 每页加载的数量
			}
		},
		computed: {
			imageStyle(item) {
				return item => {
					const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
					const w = v / 2;
					const rate = w / item.w;
					const h = rate * item.h;
					return {
						width: w + 'px',
						height: h + 'px'
					}
				}
			}
		},
		onReachBottom() {
			// console.log('123');
			this.loadStatus = 'loading';
			this.$refs.udb.loadMore()
		},
		methods: {
			toSearchPage() {
				uni.navigateTo({
					url: '/pages/utils/search-product',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			navToDetail(item) {
				// this.navTo("/pages/product/car-detail?id=" + item._id, item)
				// console.log(item);
				uni.navigateTo({
					url: "/pages/product/detail?id=" + item._id + "&tt=1",
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 当unicloud-db组件加载数据时触发
			// 加载数据成功的回调
			onDataLoad(e) {
				// console.log('读取数据库数据', e);
				const data = e;
				if (data && data.length) {
					// 将新数据加入到现有的list中
					this.list = [...this.list, ...data];
					this.loadStatus = 'loadmore';
				} else {
					this.loadStatus = 'nomore';
				}
			},

			changeList(e) {
				this[e.name].push(e.value);
			}
		}
	}
</script>

<style scoped lang="scss">
	.top-search-box {
		/* #ifdef H5 */
		margin-top: 44px;
		/* #endif */
		
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		z-index: 99;

		.nav-search-box {
			width: 50vw;
			/* #ifdef MP-WEIXIN */
			margin-left: -5vw;
			/* #endif */
			background-color: rgba(230, 230, 230, 0.8);
			display: flex;
			// justify-content: space-between;
			align-items: center;
			border-radius: 30rpx;
			padding: 10rpx 30rpx;

			.nav-search-icon {
				margin-right: 5vw;
			}

			.nav-search-text {
				margin-left: 8vw;
				color: #555;
				font-size: 32rpx;
			}
		}
	}


	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
	}

	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;

		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;

			.value {
				font-size: 32rpx;
				color: #303133;
			}
		}

		&__desc .value {
			font-size: 28rpx;
			color: #606266;
		}
	}
</style>